<template>
	<view class="flex-col page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="flex-col section_1">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">分类</view>
		</view>
		<view class="grid" v-if="nowPageIndex == 1">
			<view class="grid-item justify-between"
				@click.stop="clearnCate">
				<text>全部</text>
			</view>
			<view class="grid-item justify-between" v-for="item in treeData" :key="item._id"
				@click.stop="checkMoreDetail(item,vk.pubfn.isNotNull(item.children))">
				<text>{{item.name}}</text>
				<image src="/static/remote/7560972ddd6e1777823438adf8dca72d.png" class="image_2"
					v-if="vk.pubfn.isNotNull(item.children)" />
			</view>
		</view>
		<view class="grid" v-else>
			<view class="grid-item justify-between" v-for="item in sonTreeData" :key="item._id"
				@click="selectThisCate(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				// 来源
				from: 'home',
				// 一级树形列表
				treeData: [],
				// 二级树形列表
				sonTreeData: [],
				// 当前所处分类层级
				nowPageIndex: 1,
				// 分类名称
				catName: ''
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.from = options.from
				that.getCategories()
			},
			getCategories() {
				vk.callFunction({
					url: 'client/course/pub/categories',
					success(data) {
						let tree = vk.pubfn.arrayToTree(data.rows, {
							id: "_id",
							parent_id: "parent_id",
							children: "children"
						});
						that.treeData = tree;
					}
				});
			},
			// 返回上一级
			pageBack() {
				if (that.nowPageIndex != 1) {
					that.nowPageIndex = 1
					// 处于二级返回时清空数据
					that.sonTreeData = []
					that.catName = ''
					return
				}
				if (this.from) {
					uni.navigateBack({ delta: 1 })
				} else {
					uni.switchTab({
						url: "/pages/index/homePage"
					})
				}
			},
			//清除课程选中
			clearnCate(){
				let category_info = null
				
				vk.setStorageSync('bank_cate', category_info)
				if (this.from) {
					uni.navigateBack({ delta: 1 })
				} else {
					uni.switchTab({
						url: "/pages/index/homePage"
					})
				}
				uni.$emit('update', { msg: '页面更新' })
			},
			// 选中此课程分类
			selectThisCate(item) {
				if (that.nowPageIndex != 1) {
					that.catName += item.name
				} else {
					that.catName = item.name
				}
				let category_info = {
					id: item._id, // 分类ID
					type: that.nowPageIndex, // 分类层级  1:一级，2:二级
					name: that.catName // 分类名称
				}

				vk.setStorageSync('bank_cate', category_info)
				if (this.from) {
					uni.navigateBack({ delta: 1 })
				} else {
					uni.switchTab({
						url: "/pages/index/homePage"
					})
				}
				uni.$emit('update', { msg: '页面更新' })
			},
			// 查看二级分类
			checkMoreDetail(item, flag) {
				// 只有一级直接选择
				if (!flag) return this.selectThisCate(item)
				that.sonTreeData = item.children
				that.catName = item.name
				that.nowPageIndex = 2
			}
		}
	}
</script>
<style lang="scss" scoped>
	.status_bar,
	.top_view {
		background-color: #FDCF03;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		position: relative;

		.section_1 {
			padding-bottom: 290rpx;
			background-image: url('/static/local/16403090480416572687.png');
			background-position: 0px 0px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			.image_1 {
				left: 21rpx;
				top: 27rpx;
				width: 19rpx;
				height: 35rpx;
				position: absolute;
			}

			.cate {
				width: 100%;
				padding: 20rpx 0;
				color: rgb(51, 51, 51);
				font-size: 34rpx;
				line-height: 41rpx;
				white-space: nowrap;
				text-align: center;
			}
		}

		.grid {
			max-height: calc(100vh - 196rpx);
			overflow-y: scroll;
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			top: 196rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 22rpx;
			grid-column-gap: 24rpx;

			.grid-item {
				// width: 49%;
				max-height: 132rpx;
				padding: 48rpx 30rpx 46rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
				border-radius: 12rpx;
				position: relative;
			}

			.image_2 {
				margin: 3rpx 0 5rpx;
				width: 16rpx;
				height: 28rpx;
			}
		}
	}
</style>
